import React, { Component } from 'react'
import { Input, Popover } from 'antd'
import { ClockCircleOutlined } from '@ant-design/icons'
import FreeScrollBar from 'react-free-scrollbar'
import PropTypes from 'prop-types'
import moment from 'moment'
import style from './Index.module.less'
export default class TimePicker extends Component {
  state = {
    hourList: [],
    minuteList: [],
    hour: '',
    minute: '',
    selectedValue: ''
  }

  changeValue (hour, minute) {
    const value = moment()
    value.hour(hour)
    value.minute(minute)
    this.setState({
      selectedValue: `${hour}:${minute}`
    })
    return this.props.onChange(value)
  }

  selectHour (n) {
    this.setState({
      hour: n
    }, () => {
      if (this.state.hour && this.state.minute) {
        this.changeValue(n, this.state.minute)
      }
    })
  }

  selectMinute (n) {
    this.setState({
      minute: n
    }, () => {
      if (this.state.hour && this.state.minute) {
        this.changeValue(this.state.hour, n)
      }
    })
  }

  formatDoubleNum (n = 0) {
    return n >= 10 ? String(n) : `0${n}`
  }

  // 初始化小时列表
  initHourList () {
    const disabledHours = this.props.disabledHours()
    const list = []
    for (let i = 0; i < 24; i++) {
      if (disabledHours.indexOf(i) === -1) {
        list.push(this.formatDoubleNum(i))
      }
    }
    this.setState({
      hourList: list
    })
  }

  // 初始化分钟列表
  initMinuteList () {
    const disabledMinutes = this.props.disabledMinutes()
    const list = []
    for (let i = 0; i < 60; i++) {
      if (disabledMinutes.indexOf(i) === -1) {
        list.push(this.formatDoubleNum(i))
      }
    }
    this.setState({
      minuteList: list
    })
  }

  initHourAndMinute () {
    const value = this.props.value
    if (value instanceof moment) {
      this.setState({
        selectedValue: value.format('HH:mm'),
        hour: this.formatDoubleNum(value.hour()),
        minute: this.formatDoubleNum(value.minute())
      })
    } else if (!value) {
      this.setState({
        selectedValue: '',
        hour: '',
        minute: ''
      })
    }
  }

  componentDidUpdate (prev) {
    if (prev.value !== this.props.value) {
      this.initHourAndMinute()
    }
    if (prev.disabledHours !== this.props.disabledHours) {
      this.initHourList()
    }
    if (prev.disabledMinutes !== this.props.disabledMinutes) {
      this.initMinuteList()
    }
  }

  componentDidMount () {
    this.initHourAndMinute()
    this.initHourList()
    this.initMinuteList()
  }

  renderHourList () {
    const list = this.state.hourList
    if (list.length > 10) {
      return (
        <FreeScrollBar className='mock' style={{ height: '240px' }}>
          <div className={style['more-list']}>
            {list.map(l => {
              const cn = [style.dd]
              if (this.state.hour === l) {
                cn.push(style.active)
              }
              return <div className={cn.join(' ')} key={l} onClick={() => this.selectHour(l)}>{l}</div>
            })}
          </div>
        </FreeScrollBar>
      )
    }
    return list.map(l => {
      const cn = [style.dd]
      if (this.state.hour === l) {
        cn.push(style.active)
      }
      return <div className={cn.join(' ')} key={l} onClick={() => this.selectHour(l)}>{l}</div>
    })
  }

  renderMinuteList () {
    const list = this.state.minuteList
    if (list.length > 10) {
      return (
        <FreeScrollBar className='mock' style={{ height: '240px' }}>
          <div className={style['more-list']}>
            {list.map(l => {
              const cn = [style.dd]
              if (this.state.minute === l) {
                cn.push(style.active)
              }
              return <div className={cn.join(' ')} key={l} onClick={() => this.selectMinute(l)}>{l}</div>
            })}
          </div>
        </FreeScrollBar>
      )
    }
    return list.map(l => {
      const cn = [style.dd]
      if (this.state.minute === l) {
        cn.push(style.active)
      }
      return <div className={cn.join(' ')} key={l} onClick={() => this.selectMinute(l)}>{l}</div>
    })
  }

  renderList () {
    return (
      <div className={style.container}>
        <div className={style.list}>
          <div className={this.state.hourList.length > 10 ? [style.dt, style['more-dt']].join(' ') : style.dt}>小时</div>
          {this.renderHourList()}
        </div>
        <div className={style.list}>
          <div className={this.state.minuteList.length > 10 ? [style.dt, style['more-dt']].join(' ') : style.dt}>分钟</div>
          {this.renderMinuteList()}
        </div>
      </div>
    )
  }

  render () {
    return (
      <Popover content={this.renderList()} title={false} trigger={['click']} placement='bottom'>
        <Input placeholder={this.props.placeholder} value={this.state.selectedValue} className={style.input} suffix={<ClockCircleOutlined />} readOnly />
      </Popover>
    )
  }
}

TimePicker.prototypes = {
  value: PropTypes.object,
  disabledHours: PropTypes.func,
  disabledMinutes: PropTypes.func,
  onChange: PropTypes.func,
  maxDate: PropTypes.func,
  placeholder: PropTypes.string
}

TimePicker.defaultProps = {
  value: null,
  disabledHours: () => [],
  disabledMinutes: () => [],
  onChange: () => {},
  maxDate: () => null,
  minDate: () => null,
  placeholder: '请选择时间'
}
